import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { City } from 'src/app/shared/interfaces/city.interface';
import { CarwashesService } from 'src/app/shared/services/http/carwashes.service';
import { CarwashDto } from 'src/app/shared/services/http/dto/carwash.dto';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'app-create-carwash-form',
  templateUrl: './create-carwash-form.component.html',
  styleUrls: ['./create-carwash-form.component.css'],
})
export class CreateCarwashFormComponent implements OnInit {
  // 洗车点表单
  carwashForm: FormGroup = this.formBuilder.group({
    name: [''],
    city: [[]],
    address: [''],
    longitude: [''],
    latitude: [''],
    price: [''],
    state: [''],
  });

  // 地区数据
  nzOptions: City[] | null = null;

  // 级联选择值
  values: string[] | null = null;

  // 按钮是否被禁止
  disabled = false;

  // 创建成功事件
  @Output() create = new EventEmitter();

  constructor(
    private formBuilder: FormBuilder,
    private carwashesService: CarwashesService,
    private message: NzMessageService
  ) {}

  ngOnInit(): void {
    // 获取城市级联数据
    this.carwashesService.getCitiesOptions().subscribe((value) => {
      this.nzOptions = value;
    });
  }

  /**
   * 城市级联选择框变化
   */
  onChanges(values: string[] | null): void {}

  /**
   * 提交创建洗车点
   * @param carwashDto 洗车点
   */
  onSubmit(carwashDto: CarwashDto) {
    this.disabled = true;
    this.carwashesService.create(carwashDto).subscribe(() => {
      this.message.create('success', `创建洗车点成功`);
      this.disabled = false;
      this.create.emit();
    });
  }
}
